<template>
    <div class="bottom">
        <ul class="nav-1">
            <li @click="changeHome">首页</li>
            <li @click="show = !show">
                语言工具
                <myTransition>
                    <ul class="nav-2" v-if="show">
                        <li
                            v-for="item in list"
                            :key="item.id"
                            @click.stop="changeLi(item.id)"
                            :class="liId === item.id ? 'li-color' : ''"
                        >
                            {{ item.name }}
                        </li>
                    </ul>
                </myTransition>
            </li>

            <li>转换工具</li>
        </ul>
    </div>
</template>

<script>
import myTransition from '@/router/trasition';
export default {
    components: {
        myTransition
    },
    data() {
        return {
            list: [
                {
                    id: 1,
                    name: '一句诗词'
                },
                {
                    id: 2,
                    name: '励志句子'
                },
                {
                    id: 3,
                    name: '毒鸡汤'
                }
            ],
            liId: null,
            bigId: 1,
            show: false
        };
    },
    methods: {
        changeLi(val) {
            this.liId = val;
            if (val == 1) {
                this.$router.push({
                    path: '/one'
                });
            } else if (val == 2) {
                this.$router.push({
                    path: '/two'
                });
            } else {
                this.$router.push({
                    path: '/three'
                });
            }
        },
        changeHome() {
            this.$router.push({
                path: '/home'
            });
        }
    }
};
</script>

<style scoped lang="scss">
.bottom {
    color: #b8b8b8;
    text-align: center;
    margin: 20px 0;
    .nav-1 > li {
        margin: 5px 0;
        cursor: pointer;
        .nav-2 {
            color: #b8b8b8;
            li {
                margin: 5px 0;
            }
        }
    }
    .li-color {
        color: #4caf50;
    }
    .nav-1 > li:hover {
        color: #4caf50;
    }
}
</style>
